<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <link href="/layui/css/layui.css" rel="stylesheet">
    <title>流程模块</title>
    <!-- 注意：项目正式环境请勿引用该地址 -->
    <script src="/layui/layui.js"></script>
</head>
<style type="text/css">
    a {
        color: black;
        cursor: pointer;
    }

    a:hover {
        text-decoration: none;
    }

    .bgc-w {
        background-color: #fff;
    }
    .block{
        display: inline-block;
        width: 20px;
    }
    .col-md-3 h4,.col-md-3 h5{
        display:inline-block;
        margin-left: 10px;
    }
    .col-md-3 h4{
        margin-top: 40px;
        margin-bottom: 1px;

    }
    .col-md-3{
        -webkit-box-shadow: #666 0px 0px 10px;
        -moz-box-shadow: #666 0px 0px 10px;
        box-shadow: #666 0px 0px 10px;
        border-radius:5px;
        margin-right: 48px;
        margin-left: 27px;
        padding-top: 20px;
        padding-bottom: 20px;
        padding-left: 20px;
    }
    .me .form-group{
        margin-bottom: 48px;
    }
    .me img{
        border-radius: 15px;
        cursor: pointer;
    }
    @media screen and (max-width: 767px){
        .layui-field-title{
            margin: 5px 0!important;
        }
        .layui-field-title legend{
            font-size: 0.8rem!important;
        }
        .layui-card-header{
            font-size: 0.7rem!important;
            height: 20px!important;
            line-height: 20px!important;
        }
        .layui-card-body{
            padding: 10px 5px!important;
        }
        .layui-card-body img{
            width: 3rem!important;
            height: 3rem!important;
        }
        .layui-card-body b{
            font-size: 0.7rem!important;
        }

    }
</style>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>新建流程</legend>
    <div style="display: none" th:text="${tanchuang}" id="tanchuang"></div>
</fieldset>
<div class="layui-row">

                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">采购单</div>
                        <div class="layui-card-body">
                            <div>
                                <img id="purchaseSubmit" src="/img/01.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                                <b>采购单</b>
                                </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">入职单</div>
                        <div class="layui-card-body">
                            <div>
                                <img id="entrySubmit"  src="/img/02.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                                 <b>入职单</b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">离职单</div>
                        <div class="layui-card-body">
                            <div>
                                <img id="resignSubmit"  src="/img/03.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                               <b> 离职单</b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">请假申请单</div>
                        <div class="layui-card-body">
                            <div>
                                <img id="leaveSubmit" src="/img/04.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                               <b>请假申请单</b>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">异常考勤</div>
                        <div class="layui-card-body">
                            <div>
                                <img id="attendanceSubmit" src="/img/05.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                                <b>异常考勤</b>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <div class="layui-card">
                        <div class="layui-card-header">成交单</div>
                        <div class="layui-card-body">
                            <div>
                                <img id="proofbargainSubmit"src="/img/06.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                                <b>成交单申请</b>
                            </div>
                        </div>
                    </div>
                </div>
           <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">转正申请单</div>
              <div class="layui-card-body">
                <div>
                    <img id="regularWorkerSubmit"src="/img/07.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                    <b>转正申请单</b>
                 </div>
                 </div>
              </div>
             </div>
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">合规申请单</div>
            <div class="layui-card-body">
                <div>
                    <img id="complianceSubmit"src="/img/08.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                    <b>合规申请单</b>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">退款申请单</div>
            <div class="layui-card-body">
                <div>
                    <img id="refundSubmit"src="/img/09.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                    <b>退款申请单</b>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">报销申请单</div>
            <div class="layui-card-body">
                <div>
                    <img id="reimburseSubmit"src="/img/10.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                    <b>报销申请单</b>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">投诉申请单</div>
            <div class="layui-card-body">
                <div>
                    <img id="complaintSubmit" src="/img/11.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                    <b>投诉申请单</b>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-col-md3">
        <div class="layui-card">
            <div class="layui-card-header">借款申请单</div>
            <div class="layui-card-body">
                <div>
                    <img id="loanSubmit"src="/img/12.png" style="width:100px;height:100px;cursor:pointer;border-radius:20px">
                    <b>借款申请单</b>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 注意：如果你直接复制所有代码到本地，上述 JS 路径需要改成你本地的 -->
<script>
    layui.use(['dropdown', 'util', 'layer'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var $= layui.$
        $("#attendanceSubmit").click(function(){
            event.preventDefault();
            change("/process/attendancepage")
        });
        $("#entrySubmit").click(function(){
            event.preventDefault();
            change("/process/entrypage")
        });
        $("#leaveSubmit").click(function(){
            event.preventDefault();
            change("/process/leavepage")
        });
        $("#proofbargainSubmit").click(function(){
            event.preventDefault();
            change("/process/proofbargainpage")
        });
        $("#purchaseSubmit").click(function(){
            event.preventDefault();
            change("/process/purchasepage")
        });
        $("#resignSubmit").click(function(){
            event.preventDefault();
            change("/process/resignpage")
        });
        $("#regularWorkerSubmit").click(function(){
            event.preventDefault();
            change("/process/regularworkerpage")
        });
        $("#complianceSubmit").click(function(){
            event.preventDefault();
            change("/process/compliancepage")
        });
        $("#refundSubmit").click(function(){
            change("/process/refundpage")
        });
        $("#reimburseSubmit").click(function(){
            event.preventDefault();
            change("/process/reimbursepage")
        });
        $("#complaintSubmit").click(function(){
            // event.preventDefault();
            change("/process/complaintpage")
        });
        $("#loanSubmit").click(function(){
            event.preventDefault();
            change("/process/loanpage")
        });
        var tanchuang=$("#tanchuang").text();
        if(tanchuang.length>0){
            layer.msg("创建成功");
        }

    });

</script>
<script>
    function change(path){
        window.location.href=path;
    }
</script>

</body>
</html>